import styles from './index.module.scss'
import { Button, Checkbox, Form, Input, message, Typography } from 'antd'
import Test from '@/pages/Login/components/Test/index.jsx'
import { Canvas } from '@react-three/fiber'
import { OrbitControls } from '@react-three/drei'
import { Suspense, useState } from 'react'
import { loginMall } from '@/pages/Login/service.js'
import { useNavigate } from 'react-router'
import RegisterModal from '@/pages/Login/components/RegisterModal/index.jsx'
import { setToken, setUserInfo, useUserStore } from '@/stores/userStore.js'

const { Title } = Typography
function Login() {
	const navigate = useNavigate()
	const userInfo = useUserStore((state) => state.userInfo)
	const [isRegisterModalShow, setIsRegisterModal] = useState(false)
	const onFinish = async (values) => {
		try {
			const res = await loginMall({
				userName: values.userName,
				password: values.password,
			})
			console.log(res)
			if (res.status === 200) {
				navigate('/dashboard')
				setToken(res.data.token)
				setUserInfo(res.data.user)
			} else {
				message.error(res.data)
			}
		} catch (error) {
			console.log(error)
		}
	}
	const onFinishFailed = (errorInfo) => {
		console.log('Failed:', errorInfo)
	}
	const modalShow = () => {
		setIsRegisterModal(true)
	}
	const handleCancel = () => {
		setIsRegisterModal(false)
	}

	return (
		<div className={styles.container}>
			<div className={styles.title}>My admin</div>
			<div className={styles.loginBox}>
				<div className={styles.left}>
					<Canvas camera={{ position: [5, 5, 5], fov: 25 }}>
						<Suspense fallback={null}>
							<ambientLight intensity={0.5} />
							<directionalLight position={[3, 2, 1]} />
							<Test />
							<OrbitControls enableZoom={false} autoRotate />
						</Suspense>
					</Canvas>
				</div>
				<div className={styles.right}>
					<Title level={2} style={{ textAlign: 'center' }}>
						Login
					</Title>
					<Form
						name="basic"
						layout="vertical"
						style={{
							maxWidth: 600,
						}}
						initialValues={{
							userName: userInfo.userName,
							remember: true,
						}}
						onFinish={onFinish}
						onFinishFailed={onFinishFailed}
						autoComplete="off"
					>
						<Form.Item
							label="Username"
							name="userName"
							rules={[
								{
									required: true,
									message: 'Please input your username!',
								},
							]}
						>
							<Input />
						</Form.Item>

						<Form.Item
							label="Password"
							name="password"
							rules={[
								{
									required: true,
									message: 'Please input your password!',
								},
							]}
						>
							<Input.Password />
						</Form.Item>

						<Form.Item
							name="remember"
							valuePropName="checked"
							wrapperCol={{
								offset: 8,
								span: 16,
							}}
						>
							<Checkbox>Remember me</Checkbox>
						</Form.Item>

						<Form.Item>
							<div className={styles.btnPart}>
								<Button onClick={modalShow}>Register</Button>
								<Button type="primary" htmlType="submit">
									Login
								</Button>
							</div>
						</Form.Item>
					</Form>
				</div>
			</div>

			<RegisterModal open={isRegisterModalShow} handleCancel={handleCancel} />
		</div>
	)
}

export default Login
